<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="在售商品"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
 <u-sticky style="height: 110upx;"
      bg-color="#fff">
      <view class="client-head">
        <view class="lf el-flex">
          <!-- <u-icon @click.native="clearAreaMarket"
            size="30" name="reload">
          </u-icon> -->
          <div class="boxFlex"
            @click="areaShow=!areaShow">
            <span
              class="title">{{areaText}}</span>
            <u-icon name="arrow-right"
              color="#999">
            </u-icon>
          </div>
          <div class="areaDialog" v-if="areaShow">
            <view class="area-list">
              <view class="li"
                v-for="(item,index) in Areavalue"
                :key="index">
                <view class="cell"
                  @click="allShow(index)">
                  全部</view>
                <view
                  @click="setArea(index,v.fClassId)"
                  :class="{'active':v.fClassId===formActive[index]}"
                  class="cell"
                  v-for="(v,i) in item" :key="i">
                  {{v.fClassName}}
                </view>
              </view>
            </view>
            <u-button type="primary"
              @click="areaConfirm">确定
            </u-button>
          </div>
        </view>
        <u-search v-model="form.Key"
          @change="changeSearch">
        </u-search>
      </view>
    </u-sticky>

    <view
      class="infos whiteBg">
      <navigator
        :url="`/pages/sale/my_product_item?id=${li.id}`"
        v-for="(li,index) in clist"
        :key="index">
        <appProduct :li="li">
        </appProduct>
      </navigator>
    </view>
  </view>
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
		formActive: {
		  0: '',
		  1: '',
		  2: ''
		},
      types: [],
      className: '筛选',
      keyword: '',
      clist: [],
      isAllList: 1,
      page: 1,
      pSize: 10,
      status: 'loading',
      loading: true,
	  
	  fClassId: '',
	  areaText: '请选择商品分类',
	  Areavalue: [],
	  AreavalueData: [],
	  areaShow: false,
	  
	  
      form: {
        Key: '',
        ClassId: 0,
        Status: 0
      }
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: '在售商品'
    })
	
	this.$axios('api/ProClassBasic/GetList', 'post', { value: 0 }).then(res => {
	  let info = res.Value[0]
	  this.Areavalue = this.getarea(res.Value, info.fClassId)
	  this.AreavalueData = this.getParentNodes(res.Value)
	  setTimeout(() => {
	    this.setArea(0, info.fClassId)
	  }, 100)
	})
	
    // this.getList()
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  methods: {
    zkChange(e) {
      this.clist[e].is_zk = !this.clist[e].is_zk
    },
	
	
	allShow(idx) {
	  if (idx === 0) {
	    this.clearAreaMarket()
	  } else {
	    this.fClassId = this.formActive[idx - 1]
	    this.areaConfirm()
	  }
	},
	areaConfirm() {
	  const info = this.getIdData(this.fClassId)
	  this.areaText = info.fClassName
	  this.form.ClassId = info.fClassId
	  this.defaultData(() => {
	    // this.$refs.uDropdown.close()
	    this.areaShow = false
	    this.getList()
	  })
	},
	getParentNodes(list) {
	  let max = Math.max.apply(
	    this,
	    list.map(x => x.fLevel)
	  )
	  let arr = []
	  for (let index = 1; index <= max; index++) {
	    arr.push(list.filter(x => x.fLevel == index))
	  }
	  return arr
	},
	getarea(list) {
	  let arr = this.getParentNodes(list)
	    // .map(x => x.map(x => x.fClassName))
	    .filter(x => x.length)
	  // arr.forEach((v, i) => {
	  //   if (i > 0) v = []
	  // })
	  return arr
	},
	getParentId(id) {
	  return this.AreavalueData.flat().filter(x => x.fParentId == id)
	},
	getIdData(id) {
	  // let { column, value } = e.detail
	  // let c = this.Areavalue[column][value]
	  const arr = this.AreavalueData.flat()
	  let info = arr.find(x => x.fClassId === id)
	  return info
	},
	getNameData(name) {
	  // let { column, value } = e.detail
	  // let c = this.Areavalue[column][value]
	  const arr = this.AreavalueData.flat()
	  let info = arr.find(x => x.fClassName === name)
	  return info
	},
	setArea(column, fClassId) {
	  let col = column + 1
	  let child = this.getParentId(fClassId)
	  this.fClassId = fClassId
	  this.formActive[column] = fClassId
	  if (child.length) {
	    this.$set(this.Areavalue, col, child)
	    this.setArea(col, child[0].fClassId)
	  } else {
	    this.Areavalue = this.Areavalue.slice(0, col)
	  }
	},
	ChangeArea(e) {
	  let info = this.getinfo(e)
	  this.setArea(e.detail.column, info.fClassId)
	},
	clearAreaMarket() {
	  this.areaText = '请选择超市区域'
	  this.form.ClassId = 0
	  this.defaultData(() => {
	    // this.$refs.uDropdown.close()
	    this.areaShow = false
	    this.getList()
	  })
	},
	bindAreaMarket(e) {
	  let s = e.detail.value.map((x, i) => this.Areavalue[i][x]).pop()
	  let info = this.AreavalueData.flat().find(x => x.fClassName === s)
	  this.areaText = info.fClassName
	  this.form.ClassId = info.fClassId
	  this.defaultData(() => {
	    this.getList()
	  })
	},
	
    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.ClassId = e
      this.defaultData(() => {
        this.getList()
      })
    },
    changeSearch() {
      this.defaultData(() => {
        this.getList()
      })
    },
    defaultData(cb) {
      this.isAllList = 1
      this.page = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true
      cb()
    },
    getimg(str) {
      let img = str.replaceAll('\\', '/')
      return img.substr(1)
    },
    getList() {
      let that = this
      this.$axios('api/ProBasic/ListPaged', 'post', { value: this.form, PageIndex: this.page, PageSize: this.pSize }).then(res => {
        if (!res.Value.List.length) {
          this.isAllList = false
          return
        }
        const list = res.Value.List.map(x => ({
          id: x.fId,
          avatar: this.$api.OrderImg(x.fId),
          gname: x.fTitle,
		  AllPicList:x.AllPicList,
          details: [
            {
              label: '条码',
              value: x.fCode
            },
            {
              label: '库存（'+ x.fPackUnit+'）',
              value: x.fPackCount
            },
            {
                label: '库存（'+ x.fUnit+'）',
              value: x.fCount
            },
            {
              label: '价格（'+x.fPackUnit+'）',
              value: x.fPackPrice +' 元'
            },
            {
                label: '价格（'+x.fUnit+ '）',
              value: x.fPrice +' 元'
            }
          ]
        }))
        that.clist.push(...list)
      })
    }
  },
  onShow() {
    this.$axios('api/ProClassBasic/GetList', 'post', { value: 0 }).then(res => {
      console.log('🚀 ~ file: my_product.vue ~ line 123 ~ this.$axios ~ res', res.Value)
      let list = res.Value.map(x => ({
        label: x.fClassName,
        value: x.fClassId
      }))
      this.types = list
    })
    this.defaultData(() => {
      this.getList()
    })
  }
}
</script>

<style lang="scss">
page {
  background: #f8f9fc;
}
.searchBox {
  padding: 20rpx 32rpx;
  box-sizing: border-box;
}

.client-head {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15rpx;
  background: #fff;
  z-index: 11;

  .lf {
    font-size: 24rpx;
    margin-right: 15rpx;

    .title {
      margin: 0 10rpx;
    }
  }
  u-search {
    width: 65vw;
  }
}


.areaDialog {
  position: absolute;
  left: 0;
  top: 150rpx;
  width: 100%;
  z-index: 9;
}
.area-list {
  display: flex;
  background-color: #fff;
  .li {
    padding: 10rpx;
    height: 80vh;
    overflow: auto;
    flex-grow: 1;
    .cell {
      padding: 10rpx;
    }
    // .cell:hover {
    //   background-color: #eee;
    // }
  }
  .li:not(:first-child) {
    border-left: 1px solid #eee;
  }
  .active {
    background-color: #eee;
    color: #169bd5;
  }

  .cred {
    background-color: #ff0000;
    color: #fef0f0;
  }
}
</style>
